<template>
  <div class="list-item">
    <div class="warp">
      <div class="div">
        <je-tooltip :title="disable ? '请先开启数据权限' : ''">
          <span style="display: none">1</span>
          <je-switch
            v-model:value="value"
            mode="checkbox"
            :label="label"
            :index="index"
            :disabled="disable"
          />
        </je-tooltip>
      </div>
      <span :style="{ color: '#a9aba9' }">{{ info }}</span>
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';

  import { Switch, Tooltip } from '@jecloud/ui';
  import VueEvent from '@/helper/model/event';

  export default defineComponent({
    name: 'ListItem',
    components: {
      JeSwitch: Switch,
      JeTooltip: Tooltip,
    },
    props: {
      disable: {
        type: Boolean,
        default: false,
      },
      res: {
        type: Boolean,
        default: false,
      },
      label: {
        type: String,
        default: '',
      },
      info: {
        type: String,
        default: '',
      },
      index: {
        type: String,
        default: '',
      },
    },
    emits: ['listItemChange'],
    setup(props, { emit }) {
      const value = ref('0');
      // 初始化数据
      onMounted(() => {
        value.value = props.res;
      });
      // 切换
      watch(
        () => value.value,
        (nv) => {
          emit('listItemChange', props.index, nv);
        },
      );

      // 数据改变回调
      const setValueCb = () => {
        setTimeout(() => {
          value.value = props.res;
        }, 50);
      };

      VueEvent.on('setValue', setValueCb);
      onUnmounted(() => {
        VueEvent.off('setValue', setValueCb);
      });

      return { value };
    },
  });
</script>

<style lang="less" scoped>
  .list-item {
    display: inline-block;
    margin-top: 15px;
    padding: 0 15px;
    background: #fff;
    width: 49.5%;
    min-width: 300px;
    height: 40px;
    line-height: 40px;
    .warp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .div {
        :deep(span) {
          color: #529ee9;
        }
      }
    }
  }
</style>
